<template>
  <div class="minitorage">
    <div class="minitorage_left" id="minitorage_left">
      <div
        class="minitorage_left_1"
        :style="{
          visibility: showSiper ? 'visible' : 'hidden',
          height: showSiper ? '100%' : '0px',
          overflow: 'hidden',
        }"
      >
        <swiper
          :autoplay="true"
          :spaceBetween="10"
          :thumbs="{ swiper: thumbsSwiper }"
          :modules="modules"
          direction="vertical"
          class="mySwiper1"
        >
          <swiper-slide v-for="item in info" :key="item.ID">
            <MonitorageRoomContent :item="item"></MonitorageRoomContent>
          </swiper-slide>
        </swiper>
      </div>
      <div class="minitorage_left_2">
        <div
          class="minitorage_left_content"
          :style="{ visibility: !showSiper ? 'visible' : 'hidden' }"
        >
          <div v-for="item in num" :key="item" :style="styleObj">
            <MonitorageRoomContent
              v-if="errorInfo[item - 1]"
              :item="errorInfo[item - 1]"
            ></MonitorageRoomContent>
          </div>
        </div>
      </div>
    </div>
    <div class="minitorage_right">
      <Title>老化车缩略图</Title>
      <p>在线:{{ info.length ? info.length : 0 }}</p>
      <div class="minitorage_right_content">
        <swiper
          @swiper="setThumbsSwiper"
          :spaceBetween="10"
          :slidesPerView="4"
          :watchSlidesProgress="autoplay"
          :modules="modules"
          direction="vertical"
          class="mySwiper2"
        >
          <swiper-slide v-for="item in info" :key="item.ID" @click="change">
            <MonitorageRoomContent
              :item="item"
              v-if="item"
            ></MonitorageRoomContent>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>
<script setup name="monitorageroom">
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/css";

import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";
// import required modules
import { FreeMode, Thumbs, Autoplay } from "swiper/modules";
import Title from "@/components/Title/index.vue";
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import MonitorageRoomContent from "@/realTimeMonitoring/Monitorageroom/components/MonitorageRoomContent.vue";
import monitorageRoomApi from "@/api/monitorageRoomApi.js";
const modules = [Thumbs, Autoplay, FreeMode];
const props = defineProps(["fullscreen", "WRNo"]);
const autoplay = ref(false);
const showSiper = ref(false);
// 请求老化室下的老化车
let info = ref([]);
let errorInfo = ref([]);
const fetchLaoHuaCheInfo = (WRNo) => {
  monitorageRoomApi
    .getLaoHuaCheInfo({
      UUID: "52d1ed5c58364e6248935455c1a298f5",
      WRNo,
      GWNo: 0,
      IsOnLine: 1,
      //IsOnLine: 0,
    })
    .then((res) => {
      info.value = res.Data;
      errorInfo.value = res.Data.filter((el) => {
        return (
          el.IsOnLine == 1 &&
          el.WRNo == WRNo &&
          (el.AlarmCnt != 0 || el.CommAlarm == 1 || el.FanKaAlarm == 1)
        );
      });
      // errorInfo.value = []
      // 存在告警老化车,停止关闭自动轮播,
      if (errorInfo.value[0]) {
        showSiper.value = false;
        autoplay.value = false;
        if (errorInfo.value.length >= 9) {
          num.value = 9;
        } else {
          num.value = errorInfo.value.length;
        }
        // 不存在告警开启轮播
      } else {
        showSiper.value = true;
        autoplay.value = true;
      }
    });
};
let intervalId = ref();
let WRNo = ref();
watch(
  () => props.WRNo,
  (n) => {
    if (intervalId.value) clearInterval(intervalId.value);
    if (n) fetchLaoHuaCheInfo(n);
    WRNo.value = n;
    intervalId.value = setInterval(() => {
      fetchLaoHuaCheInfo(WRNo.value);
    }, 5000);
  },
  {
    immediate: true,
  }
);
const thumbsSwiper = ref(null);

const setThumbsSwiper = (swiper) => {
  thumbsSwiper.value = swiper;
};

/* --------------------- */
// 样式
let styleObj = ref({});
let num = ref(0);
watch(
  () => num.value,
  (n) => {
    if (n === 1) {
      styleObj.value = {
        width: "100%",
        height: "100%",
      };
    } else if (n === 2 || n === 3 || n === 4) {
      styleObj.value = {
        width: "50%",
        height: "50%",
      };
    } else if (n === 5 || n === 6||n === 7 || n === 8 || n === 9) {
      styleObj.value = {
        width: "33.33%",
        height: "33.33%",
      };
    }
  }
);

onMounted(() => {
  props.fullscreen();
});
onBeforeUnmount(() => {
  if (id.value) clearTimeout(id.value);
  if (intervalId.value) clearInterval(intervalId.value);
});
let id = ref();
const change = () => {
  if (id.value) clearTimeout(id.value);
  showSiper.value = true;
  autoplay.value = true;

  id.value = setTimeout(() => {
    if (errorInfo.value[0]) {
      showSiper.value = false;
      autoplay.value = false;
    }
  }, 5000);
};
</script>
<style lang="scss" scoped>
.minitorage {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px;
  & > div {
    height: 100%;
    overflow: hidden;
  }
  .minitorage_left {
    width: 85%;
    margin-right: 6px;
    border-image: url("@/static/supervisoryControl/pic_bj09.png") 10/8px/0;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    padding: 0.5% 0.09% 0;
    & > div {
      height: 100%;
      width: 100%;
      & > div {
        height: 100%;
        width: 100%;
      }
    }
    .mySwiper1 {
      height: 100%;
      width: 100%;
    }
    .minitorage_left_content {
      height: 100%;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: flex-start;
      & > div {
        padding: 0.18%;
      }
    }
  }
  .minitorage_right {
    width: 15%;
    border-image: url("@/static/supervisoryControl/pic_bj11.png") 10/8px/0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding: 0 0.4%;
    & >  * {
      width: 100%;
    }
    & > p {
      width: auto;
      position: absolute;
      font-size: 12px;
      right: 4%;
      top: 10px;
      z-index: 100;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #00e5ff;
      white-space: nowrap;
    }
    .minitorage_right_content {
      flex: 1;
      margin: 6px 0;
      overflow: hidden;
      .mySwiper2 {
        height: 100%;
        width: 100%;
      }
      .minitorage_right_content_slide {
        width: 100%;
      }
      .mySwiper2 .swiper-slide {
        width: 100%;
        height: 25%;

        opacity: 0.9;
      }
      .mySwiper2 .swiper-slide img {
        height: 100%;
        width: 100%;
      }

      .mySwiper2 .swiper-slide-thumb-active {
        border: 1px solid #c3fbf4;
        border-radius: 5px;
        box-shadow: 0 0 6px 0 #fff, inset 0 0 6px 0 #fff;
        opacity: 1;
      }
    }
  }
}
</style>

